<template>
	<div class="paixu">
		<div class="question">
			<div class="title">
				<span>{{ questIndex }}.排序题</span>
			</div>
			<div class="question">
				<template v-for="(item,index) in question.quest.question[0].value" :key="index">
					<p v-if="item !==''" class="bigDesc">
						{{ item }}
					</p>
				</template>
				<template v-for="(item,index) in question.quest.subQuestion[0].question" :key ="index">
					<template v-if="item.type ==='text'">
						<p v-for="(item1,index1) in item.value" :key = "index1">
							{{ item1 }}
						</p>
					</template>
					<template v-else-if="item.type==='audio'">
						<div class="iconBox">
							<img src="@/assets/audio.png" @click="handlePlay(item.value)">
						</div>
					</template>
					<template v-else-if="item.type==='picture'">
						<div class="iconBox">
							<el-image
								style="width: 150px; height: 150px"
								:src="item.value"
								:preview-src-list="[String(item.value)]"
								:initial-index="0"
								fit="contain"
							/>
						</div>
					</template>
					<template v-else-if="item.type==='video'">
						<div class="iconBox">
							<video controls width="250">
								<source :src="item.value" type="video/webm"/>
							</video>
						</div>
					</template>
				</template>
				<p v-for="(item,index) in litterDesc" :key="index" class="litterDesc">
					<span v-for="(item1,index1) in item" :key="index1">
						<span v-if="item1 !==' '">
							<span>{{ item1 }}</span>
						</span>
						<span v-else class="underline">
						</span>
					</span>
				</p>
				<div class="desc">
					<div v-for="(item,index) in state.questionData" :key="index">
						<div
							class="button"
							@click="selectAnswer(Number(index),item)"
							v-if="item!=''"
						>
							{{ item }}
						</div>
					</div>
				</div>
				<div class="answer">

					<div v-for="(item,index) in state.answer" :key="index">
						<div
							class="button"
							@click="deleteAnswer(Number(index),item)"
							v-if="item!=''"
						>
							{{ item }}
						</div>
					</div>
				</div>


			</div>

		</div>

	</div>
</template>
<script setup lang="ts">
import {toRefs, defineProps, reactive, onMounted, PropType, Ref} from 'vue'
import {useDataStore} from "@/stores/useDataStore";

const props = defineProps({
	//子组件接收父组件传递过来的值
	question: {
		type: Object as PropType<{ quest: {subQuestion: Array<any>,question: Array<any>}, seqNum: number }>,
	},
	questIndex: {
		type: Number
	},
	seq: {
		type: Number
	}
})

const { question,questIndex,seq } = toRefs(props) as { question: Ref<{ quest: { subQuestion: Array<any> ,question: Array<any>}, seqNum: number }>, questIndex: Ref<number>,seq: Ref<number>}

const userAnswerState = useDataStore();

onMounted(() => {
	state.questionData = question?.value?.quest.subQuestion[0].constraint.value;
})

const state = reactive<{ answer: string[], questionData: string[] }>({
	answer: [],
	questionData: []
})

const litterDesc = question?.value?.quest.subQuestion[0].content.value.map((item: string, index: any) => {
	//
	return item.replace(/<\/blank>/g, ' ').split('');
});

const setUserAnswer = () => {
	const payload = {
		template: question?.value?.quest.subQuestion[0].template,
		userAnswer: state.answer
	};
	userAnswerState.setUserAnswer(payload, seq.value-1);
	console.log(userAnswerState.userAnswer)
}

const selectAnswer = (index: number, item: string) => {
	state.questionData[index] = '';
	state.answer.push(item);
	let answer = [];
	for (let i = 0; i < state.answer.length; i++) {
		if (state.answer[i]) {
			answer.push(state.answer[i])
		}
	}
	state.answer = answer;
	const underlines = document.querySelectorAll('.underline');
	if (underlines) {
		for (let i = 0; i < underlines.length; i++) {
			underlines[i].innerText = state.answer[i] ? state.answer[i] : '';
		}
	}
	setUserAnswer();
}

const handlePlay = (source: string) => {
	if (userAnswerState.currentAudio) {
		userAnswerState.currentAudio.pause(); // 暂停当前音频
		userAnswerState.currentAudio = null; // 释放当前音频
	}

	userAnswerState.currentAudio = new Audio(source) as any; // 创建新的 Audio 对象
	userAnswerState.currentAudio?.play(); // 播放音频
}
const deleteAnswer = (index: number, item: string) => {
	const underlines = document.getElementsByClassName('underline');
	if (underlines) {
		// underlines[index].textContent= ''
		for (let i = 0; i < underlines.length; i++) {
			underlines[i].textContent = '';
		}
	}
	state.questionData.push(item)
	state.answer.splice(index, 1);
	setUserAnswer();
}

</script>
<style scoped lang="scss">
.paixu {
	img {
		width: 30px;
		height: 30px;
		object-fit: contain;
	}

	.question {
		margin-bottom: 20px;

		.title {
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 10px;
			color: #6a727f;
		}

		.dot {
			font-weight: 700;
			color: #5189dd;
			margin-right: 5px;
		}

		.question {
			font-size: 18px;
			color: #7c7787;
			text-indent: 2em;
			.button {
				text-indent: 0;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				line-height: 1;
				height: 32px;
				white-space: nowrap;
				cursor: pointer;
				color: #606266;
				text-align: center;
				box-sizing: border-box;
				outline: 0;
				transition: .1s;
				font-weight: 500;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				vertical-align: middle;
				-webkit-appearance: none;
				background-color: #fff;
				border: 1px solid #dcdfe6;
				padding: 8px 15px;
				font-size: 14px;
				border-radius: 4px;
			}
			.button:hover {
				background-color: #ecf5ff;
				color: #7760fd;
			}
			.desc {
				display: flex;
				width: 70%;
				justify-content: space-around;
				margin-left: 100px;
				margin-top: 20px;
			}

			.litterDesc {
				margin-top: 20px;

				.underline {
					font-size: 15px;
					text-indent: 0;
					display: inline-block;
					width: 30px;
					text-align: center;
					color: #aeb1b8;
					margin: 5px 10px 0 10px;
					border-bottom: 2px solid black;
				}
			}


			.iconBox {
				text-indent: 0;
				display: flex;
				justify-content: center;
				margin-top: 20px;

				.icon {
					font-size: 30px;
				}

			}

			.answer {
				display: flex;
				align-items: center;
				margin-top: 20px;
				margin-left: 30px;
				height: 100px;
				border: 1px solid #f2f3f5;
			}
		}

	}
}

</style>